<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Droppable - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic Droppable</h2>
<div class="demo-info">
    <div class="demo-tip icon-tip"></div>
    <div>Drag the boxed on left to the target area on right.</div>
</div>
<div style="margin:10px 0;"></div>
<div style="float:left;width:200px;margin-right:20px;">
    <div class="title">Source</div>
    <div>
        <div class="dragitem">Apple</div>
        <div class="dragitem">Peach</div>
        <div class="dragitem">Orange</div>
    </div>
</div>
<div style="float:left;width:200px;">
    <div class="title">Target</div>
    <div class="easyui-droppable targetarea"
         data-options="
					accept: '.dragitem',
					onDragEnter:function(e,source){
						$(this).html('enter');
					},
					onDragLeave: function(e,source){
						$(this).html('leave');
					},
					onDrop: function(e,source){
						$(this).html($(source).html() + ' dropped');
					}
				">
    </div>
</div>
<div style="clear:both"></div>
<style type="text/css">
    .title {
        margin-bottom: 10px;
    }

    .dragitem {
        border: 1px solid #ccc;
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
    }

    .targetarea {
        border: 1px solid red;
        height: 150px;
    }

    .proxy {
        border: 1px solid #ccc;
        width: 80px;
        background: #fafafa;
    }
</style>
<script>
    $(function () {
        $('.dragitem').draggable({
            revert: true,
            deltaX: 10,
            deltaY: 10,
            proxy: function (source) {
                var n = $('<div class="proxy"></div>');
                n.html($(source).html()).appendTo('body');
                return n;
            }
        });
    });
</script>
</body>
</html>